<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index" class="chat-content-big" :style="{backgroundSize:'100% '+dwImgHeight}">
		<!-- 需配置bottom的偏移量, 用于底部留白 -->
		<!-- <view class="chat_title" :style="{top:topXp+45+'px'}" v-if="topXp != 0">易通AI</view> -->
		<mescroll-body class="chat-content" :ref="'mescrollRef'+i" :top="topXp ? topXp+55+'px' : ''" bottom="90px"
			@init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			
			<!-- 无更多消息 -->
			<view v-if="isEnd" class="msg-end">没有更多消息了</view>
			
			<!-- 首页第一次进来 -->
			<view class="ai-box" style="flex-direction: column;" v-if="index == 0 && welcome_message == '易通AI助手' ">
				<!-- <image class="user-icon" src="../../static/xylogo.png" mode=""></image> -->
				<view class="ai-zhushou-box">
					<view class="ai-zhushou-box-top">
						<view class="ai-zhushou-box-top-left">
							<p>嗨！你好呀</p>
							<p>我是你的超级AI助手~</p>
						</view>
						<image class="logo-img" src="../../static/ai_index_icon_robot@2x.png" mode=""></image>
					</view>
					<view class="ai-zhushou-span">
						<span>初次见面，我希望以后能够成为你的智能随身助手，
						帮助你高效的解决问题、激发创意灵感、辅助内容
						创作，现在有什么能帮助你的吗?</span> 
					</view>
				</view>
				<view class="suijitiwen-box">
					<view class="suijitiwen-top">
						<view class="suijitiwen-top-left">你可以这样问我:</view>
						<view class="suijitiwen-top-right" @click="suijishuaxin">
							<image :class="['shuaxin-icon',isxz ? 'rotated' :'' ]" src="../../static/ai_index_icon_refresh@2x.png" mode=""></image>
							<span>换一批</span>
						</view>
					</view>
					<view class="wenti-list" v-for="(oss,index) in suijiQuest" :key="index" @click="suijiQuestFun(oss.newss)">
						<view class="wenti-list-left">{{oss.newss}}</view>
						<image class="wenti-list-right" src="../../static/ai_index_open_img@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			
			

			<!-- 消息列表 (必须配置id,以便定位) -->
			 <u-checkbox-group
				v-model="checkboxValue1"
				placement="column"
			>
				
				<view v-for="(item,index) in msgList" :key="index" :id="item.id"  v-if="user_id" >
					<!-- 机器人 -->
					<view class="ai-box" v-if="item.role == 'system' && index == 0 && welcome_message != '易通AI助手' " >
						<!-- <image class="user-icon" src="../../static/xylogo.png" mode=""></image> -->
						<view class="ai-text" v-if="item.type == 'text'">
							<text :user-select="true">{{item.message}}</text> 
						</view>
						<view class="ai-text" v-if="item.type == 'img'">
							<image class="ai-img-sheng" :src="item.message" @click.stop="seeImg(item.message)"></image>
							<span class="shan-text" v-if="!shuru_tf && index == msgList.length-1">_</span>
						</view>
					</view>
					<!-- 当前助手提问的例子 -->
					<view class="ai-box" v-if="item.role == 'system' && index == 0 && welcome_message != '易通AI助手' && askQuestions.length > 0" >
						<view class="suijitiwen-box">
							<view class="suijitiwen-top">
								<view class="suijitiwen-top-left">你可以这样问我:</view>
							</view>
							<view class="wenti-list" v-for="(askText,index) in askQuestions" :key="index" @click="suijiQuestFun(askText)">
								<view class="wenti-list-left">{{askText}}</view>
								<image class="wenti-list-right" src="../../static/ai_index_open_img@2x.png" mode=""></image>
							</view>
						</view>
					</view>
					
					<view class="ai-box" v-if="item.role == 'system' && index != 0">
						<!-- <image class="user-icon" src="../../static/xylogo.png" mode=""></image> -->
						<view class="ai-text" v-if="item.type == 'text'">
							<div> 
								<text :user-select="true">{{item.message}}</text> 
								<span class="shan-text" v-if="!shuru_tf && index == msgList.length-1">_</span> 
							</div>
							<view class="ai-box-bottom">
								<view class="fuzhi-left" @click="fuzhi(item.message)">
									<image class="icon-img" src="../../static/ytai_answer_icon_copy@2x.png" mode=""></image>
									<text>复制</text>
								</view>
								<view class="fuzhi-right">
									<button class="share-btn" open-type="share"></button>
									<image class="icon-img" src="../../static/ytai_answer_icon_share@2x.png" mode="">
									</image>
									<text>转发</text>
								</view>
							</view>
						</view>
						<view class="ai-text" v-if="item.type == 'img'">
							<image class="ai-img-sheng" :src="item.message" @click.stop="seeImg(item.message)"></image>
							<span class="shan-text" v-if="!shuru_tf && index == msgList.length-1">_</span>
						</view>
						<view style="margin-left: 15px;" v-if="fabu">
							<u-checkbox :key="index" :name="index"></u-checkbox>
						</view>
					</view>
					<!-- 用户 -->
					<view class="people-box" v-if="item.role == 'user'">
						<view style="margin-right: 15px;" v-if="fabu">
							<u-checkbox :key="index" :name="index"></u-checkbox>
						</view>
						<view class="people-text">
							<text :user-select="true">{{item.message}}</text>
						</view>
						<!-- <image class="user-icon" src="../../static/ytai_answer_icon_user@2x.png" mode=""></image> -->
					</view>
				</view>
			</u-checkbox-group>
			<view class="ai-box" v-if="loadingAi">
				<image class="user-icon" src="../../static/xylogo.png" mode=""></image>
				<view class="ai-text">
					<image class="loading-icon" src="../../static/loading.gif" mode=""></image>
				</view>
			</view>
		</mescroll-body>
		<view class="input-box" v-if="!fabu" :style="{bottom:inputHeight+'px'}">
			<view class="input-box-left">
				<input type="text" cursor-spacing="0" :adjust-position="false" placeholder="请描述您的问题"
					v-model="shuru_text" @focus="inputBindFocus" :disabled="!shuru_tf" @blur="inputHeight=0">
			</view>
			<view class="input-box-right" v-if="shuru_tf" @click="fasong()">
				<image class="fasong-icon" src="../../static/ai_index_icon_send_blue@2x.png" mode=""></image>
			</view>
			<view class="input-box-right" v-if="!shuru_tf">
				<image class="loading-icon" src="../../static/ai_index_icon_send@2x.png" mode=""></image>
			</view>
		</view>
		<view class="xuanzhong-Btn" v-if="fabu" :style="{bottom:20+'px'}" @click="fabugo">
			选择需要分享的内容到下一步
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import http from '../../api/api-index.js'
	import queset from '../../common/randomproblem.js'
	import tipArray from '../../common/guoluNews.js'
	const BASE_URL = 'https://ai.ytslgz.cn'

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			dialog_ident:{
				type:String,
				default:''
			},
			appid:{
				type:String,
				default:''
			},
			welcome_message:{
				type:String,
				default:''
			},
			topXp: {
				type: Number,
				default () {
					return 0
				}
			},
			fabu:{
				type:Boolean,
				default:false
			},
			//当前助手问题例子
			askQuestions:{
				type:Array,
				default:()=> []
			}
		},
		watch:{
			askQuestions:{
				handler(a,b){
					console.log(a,b)
				},
				deep:true
			},
			topXp(a,b){
				const chubili = 750/450
				uni.getSystemInfo({
					success: (res) => {
						let screenWidth = res.screenWidth
						let bgImgHeight = screenWidth/chubili
						this.dwImgHeight = bgImgHeight+'px'
					}
				})
			},
		},
		data() {
			return {
				downOption: {
					autoShowLoading: true, // 显示下拉刷新的进度条
					textColor: "#000" // 下拉刷新的文本颜色
				},
				upOption: {
					use: false, // 禁止上拉
					toTop: {
						src: '' // 不显示回到顶部按钮
					}
				},
				pageNum: 1, // 页码
				pageSize: 5, // 页长
				isEnd: false, // 是否无消息
				msgList: [],
				inputHeight: 0,
				shuru_tf: true, //是否能发送
				shuru_text: '',
				controller: '',
				isStopped: false,
				user_id:'',
				checkboxValue1:[],
				isxz:false,
				suijiQuest:[
					{id:'0',newss:'请为我设计一份年终总结'},
					{id:'1',newss:'请帮我画一幅写实的兔子的画'},
					{id:'2',newss:'请帮我画一幅写实的美女的画'},
				],
				dwImgHeight:'0',//背景图的高度
			}
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				let uid = uni.getStorageSync('uid')
				this.user_id = uid
				if(!this.user_id){
					this.mescroll.endErr();
					return false
				}
				if(!this.dialog_ident && this.welcome_message == '易通AI助手'){
					//创建标识 是首页传过来的话
					this.dialog_ident = uni.getStorageSync('yitongAiID')
					this.chatWechat()
				}else{
					this.chatWechat()
				}
			},
			upCallback() {
				this.isEnd = true; // 标记已无更多消息
			},
			isImgMsg(msg){
				return msg.includes('img')
			},
			fasong() {
				console.log(this.askQuestions)
				let uid = uni.getStorageSync('uid');
				this.user_id = uid
				if(!uid){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else if (this.shuru_text != "" && this.shuru_tf) {
					this.aiFasong()
					this.shuru_text = ""
				} else {
					uni.showToast({
						title: '你还没有输入问题呢！',
						icon: 'none'
					});
				}
			},
			//随机提问
			suijiQuestFun(item){
				this.shuru_text = item
				this.fasong()
			},
			//换一批
			suijishuaxin(){
				this.isxz = true 
				setTimeout(() => {
					this.isxz = false
				  }, 500);
				  const index1 = Math.floor(Math.random() * queset.length);
				  const index2 = Math.floor(Math.random() * queset.length);
				  const index3 = Math.floor(Math.random() * queset.length);
				
				  // 根据索引从数组中选择三个元素
				  const element1 = queset[index1];
				  const element2 = queset[index2];
				  const element3 = queset[index3];
				  
				  this.suijiQuest = [element1,element2,element3]
			},
			//请求加载 下拉加载
			chatWechat(){
				uni.request({
					url:BASE_URL+'/api/entry',
					method:'get',
					data:{
						path:'dialog_info',
						dialog_ident:this.dialog_ident,
						user_id:this.user_id,
						page:this.pageNum,
						limit:this.pageSize,
						appid:this.appid,
					},
					success: (res) => {
						let data = res.data.result
						// 需自行维护页码
						this.pageNum++;
						// 先隐藏下拉刷新的状态
						this.mescroll.endSuccess();
						
						let array_data = []
						
						//是否为第一次打开对话
						if(data.length === 0 && this.pageNum == 2){
							array_data.push({
								role:'system',
								type:'text',
								message:this.welcome_message
							})
							this.msgList = array_data.concat(this.msgList)
							return false
						}
						
						// 不满一页,说明已经无更多消息 (建议根据您实际接口返回的总页码数,总消息量,是否有消息的字段来判断)
						if (data.length < this.pageSize) {
							this.isEnd = true; // 标记已无更多消息
							this.mescroll.lockDownScroll(true); // 锁定下拉
						}
						
						data.reverse()
						for(let i = 0;i < data.length; i++){
							if(data[i].role == 'system'){
								if(data[i].message.includes('img')){
									array_data.push({
										role:'system',
										type:'img',
										message:data[i].message.match(/src="(.*?)" /)[1],
									})
								}else{
									array_data.push({
										role:'system',
										type:'text',
										message:data[i].message
									})
								}
							}else if(data[i].role == 'user'){
								array_data.push({
									role:'user',
									type:'text',
									message:data[i].message
								})
							}
						}
						let topMsg = this.msgList[0]
						this.msgList = array_data.concat(this.msgList)
						this.$nextTick(() => {
							if (this.pageNum <= 2) {
								// 第一页直接滚动到底部 ( this.pageNum已在前面加1 )
								this.mescroll.scrollTo(99999, 0)
							} else if (topMsg) {
								// 保持顶部消息的位置
								let view = uni.createSelectorQuery().select('#' + topMsg.id);
								view.boundingClientRect(v => {
									console.log('v', v)
									console.log("节点离页面顶部的距离=" + v.top);
									this.mescroll.scrollTo(v.top - 100, 0) // 减去上偏移量100
								}).exec();
							}
						})
					},
					error:()=>{
						this.pageNum--; // 联网失败,必须回减页码
						this.mescroll.endErr(); // 隐藏下拉刷新的状态
					}
				})
			},
			async aiFasong() {
				this.shuru_tf = false
				this.loadingAi = true
				this.msgList.push({
					role: 'user',
					type:'text',
					message: this.shuru_text
				})
				this.$nextTick(() => {
					this.mescroll.scrollTo(99999999);
				});
				let index = this.msgList.length
				
				const requestTask = await uni.request({
					url: BASE_URL+'/api/entry?path=chat',
					method: 'POST',
					enableChunked: true,
					data: {
						message: this.shuru_text,
						user_id: this.user_id,
						dialog_ident: this.dialog_ident,
						appid:this.appid
					},
					success: (res) => {
						console.log(res)
					},
					error: (res) => {
						console.log(res)
					}
				})
				let _this = this
				let aiObj = {
					role: 'system',
					type:'text',
					message: "",
				}
				this.msgList.push(aiObj)
				let text_array = []
				let timer = ''
				let numFirst = 0
				let aiText = ''
				let speed = 10
				
				requestTask.onChunkReceived(function(res) {
					let message = {};
					const uint8Array = new Uint8Array(res.data);
					let result = String.fromCharCode.apply(null, uint8Array);
					result = decodeURIComponent(escape(result));
					if(_this.isValidJSON(result)){
						let JSONresult = JSON.parse(result)
						if(JSONresult.code == 400){
							//能量不足
							_this.shuru_tf = true
							_this.loadingAi = false
							setTimeout(()=>{
								_this.msgList.pop()
							},500)
							uni.showModal({
								title: '提示',
								content: JSONresult.msg,
								confirmText:'做任务',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/power/index'
										})
									}
								}
							});
							return false
						}else if(JSONresult.includes('png')){
							_this.msgList.at(-1).type = 'img'
							_this.msgList.at(-1).message = JSONresult.result
							_this.shuru_tf = true
							_this.loadingAi = false
							_this.$nextTick(() => {
								_this.mescroll.scrollTo(99999999);
							});
							clearInterval(timer)
							return false
						}
					}else{
						result = result.replace("\\n", "<br>");
						result.split("\n").forEach(item => {
							item = item.replace("data: ", "");
							if (item !== '[DONE]' && item !== '') {
								try {
									message = JSON.parse(item)
									text_array.push( (message.choices[0].delta.content.replace(/<br>/g,"\n")) );
								} catch (e) {}
							} else if (item === '[DONE]') {
								//结束
								text_array.push('[DONE]')
							}
						})
					}
				})
				clearInterval(timer)
				timer = setInterval(() => {
					if (Array.isArray(text_array) && text_array.length > 0 && text_array[0] != '[DONE]') {
						if (numFirst >= text_array[0].length) {
							text_array.shift()
							numFirst = 0
						} else {
							aiText = text_array[0].slice(numFirst, numFirst+1)
							_this.msgList.at(-1).message += aiText
							numFirst++
							_this.$nextTick(() => {
								_this.mescroll.scrollTo(99999999);
							});
						}
					} else if(text_array[0] == '[DONE]') {
						clearInterval(timer)
						_this.shuru_tf = true
						_this.loadingAi = false
					}
				}, speed)
			},
			inputBindFocus(e) {
				if (e.detail.height) {
					this.inputHeight = e.detail.height //这个高度就是软键盘的高度
				}
			},
			fuzhi(text) {
				uni.setClipboardData({
					data: text,
				});
			},
			//预览图片
			seeImg(url){
				let imgArray = []
				imgArray.push(url)
				uni.previewImage({
					urls: imgArray,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//获取选中的内容 去发布
			fabugo(){
				let dialog = []
				for(let i = 0;i<this.checkboxValue1.length;i++){
					dialog.push(this.msgList[this.checkboxValue1[i]])
				}
				if(dialog.length == 0){
					uni.showToast({
						title:'请选择要发布的内容!',
						icon:'error'
					})
					return false
				}
				uni.setStorageSync('share_dialog',dialog)
				uni.navigateTo({
					url:'/pages/fabuWork/fabuWork?appid='+this.appid
				})
			},
			//是否JSON字符串
			isValidJSON(text) {
			    try {
			        JSON.parse(text);
			        return true;
			    } catch (error) {
			        return false;
			    }
			}
		}
	}
</script>

<style lang="scss">
	.chat-content-big {
		width: 100%;
		background: $bg-color;
		background-image: url('https://ai.ytslgz.cn/static/xcx/xcx_bg.png');
		background-repeat: no-repeat;
		background-attachment:fixed;
		/* 无更多消息 */
		.msg-end {
			padding: 40rpx 0;
			font-size: 24rpx;
			text-align: center;
			color: #000;
		}

		.input-box {
			position: fixed;
			transition: 0.5s;
			z-index: 10;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			border-radius: 10px 10px 0 0;
			box-shadow: 0px 0px 80px  5px #E9EEFA;
			background-color: #F4F6FC;
			border: 1px solid #fff;
			padding: 0 15px;
			padding-bottom: 20px;
			.input-box-left {
				width: calc(100% - 45px);
				background-color: #fff;
				border-radius: 25px;
				height: 40px;
				input {
					width: 100%;
					height: 40px;
					line-height: 40px;
					box-sizing: border-box;
					padding: 0 15px;
				}
			}

			.input-box-right {
				width: 35px;
				height: 35px;

				.fasong-icon {
					width: 35px;
					height: 35px;
				}

				.loading-icon {
					width: 35px;
					height: 35px;
				}
			}
		}
		.chat_title{
			width: 100%;
			height: 40px;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			text-align: center;
			line-height: 40px;
			border-bottom: 1px solid #f2f2f2;
			box-shadow: 0px 0px 10px #f6f6f6;
			transition: 0.5s;
		}
	}

	.ai-box {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-bottom: 30px;
		margin-top: 20px;
		.ai-zhushou-box{
			width: calc(100% - 30px);
			margin-left: 10px;
			background: #fff;
			position: relative;
			border-radius: 10px;
			line-height: 25px;
			padding:17px 12px;
			box-sizing: border-box;
			margin-top: 30px;
			.ai-zhushou-box-top{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.ai-zhushou-box-top-left{
					font-size: 18px;
					font-weight: bold;
					color: #000;
					line-height: 26px;
				}
				.logo-img{
					width: 110px;
					height: 110px;
					position: absolute;
					right: 0;
					top: -30px;
				}
			}
			.ai-zhushou-span{
				font-size: 14px;
				color: #333;
				margin-top: 5px;
				line-height: 22px;
				width: 90%;
			}
		}
		.ai-zhushou-box::before {
			content: ' ';
			position: absolute;
			border: 8px solid transparent;
			width: 0;
			height: 0;
			border-right-color: #fff;
			left: -16px;
			top: 12px;
		}
		.suijitiwen-box{
			width: calc(100% - 30px);
			margin-left: 10px;
			background: #fff;
			position: relative;
			border-radius: 10px;
			line-height: 25px;
			padding:17px 12px;
			box-sizing: border-box;
			margin-top: 10px;
			.suijitiwen-top{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.suijitiwen-top-left{
					font-size: 14px;
					color: #333;
				}
				.suijitiwen-top-right{
					width: 80px;
					height: 30px;
					border-radius: 15px;
					font-size: 12px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					color: #666;
					.shuaxin-icon{
						width: 14px;
						height: 14px;
						margin-right: 5px;
					}
				}
			}
			.wenti-list{
				width: 100%;
				min-height: 36px;
				border-radius: 8px;
				background: #F8FAFD;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 10px 0 24px;
				margin-top: 10px;
				.wenti-list-left{
					width: calc(100% - 30px);
					font-size: 14px;
					color: #333;
					position: relative;
				}
				.wenti-list-left::before{
					content: ' ';
					position: absolute;
					width: 6px;
					height: 6px;
					background-color: #D3DFFF;
					border-radius: 50%;
					left: -13px;
					top: 10px;
				}
				.wenti-list-right{
					width: 20px;
					height: 20px;
				}
			}
		}
		.suijitiwen-box::before {
			content: ' ';
			position: absolute;
			border: 8px solid transparent;
			width: 0;
			height: 0;
			border-right-color: #fff;
			left: -16px;
			top: 12px;
		}

		.loading-icon {
			width: 40px;
			height: 16px;
		}

		.user-icon {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: block;
		}

		.ai-text {
			max-width: calc(100% - 100px);
			margin-left: 10px;
			background-color: #fff;
			padding: 10px;
			border-radius: 5px;
			line-height: 25px;
			position: relative;
			.ai-img-sheng{
				width: 300px;
				height: 300px;
				display: block;
			}
		}

		.ai-text::before {
			content: ' ';
			position: absolute;
			border: 8px solid transparent;
			width: 0;
			height: 0;
			border-right-color: #fff;
			left: -16px;
			top: 12px;
		}

		.ai-box-bottom {
			width: 100%;
			height: 50px;
			margin-top: 15px;
			border-top: 1px solid #f6f6f6;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;

			.fuzhi-left {
				display: flex;
				flex-direction: row;
				margin-right: 30px;
				align-items: center;
			}

			.fuzhi-right {
				display: flex;
				margin: 0;
				flex-direction: row;
				margin-right: 15px;
				align-items: center;
				border: 0px;
				background: #fff;
				position: relative;
			}

			.share-btn {
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.icon-img {
				width: 14px;
				height: 14px;
				margin-right: 10px;
			}

			.fuzhi-left text {
				font-size: 14px;
				color: #999;
			}

			.fuzhi-right text {
				font-size: 14px;
				color: #999;
			}
		}
	}

	.people-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 30px;

		.people-text {
			max-width: calc(100% - 130px);
			margin-right: 10px;
			background-color: rgb(0, 129, 248);
			padding: 5px 10px;
			border-radius: 3px;
			line-height: 25px;
			position: relative;
			color: #fff;
		}

		.people-text::before {
			content: ' ';
			position: absolute;
			border: 8px solid transparent;
			width: 0;
			height: 0;
			border-left-color: rgb(0, 129, 248);
			right: -16px;
			top: 12px;
		}
	}


	@-webkit-keyframes fade {
		from {
			opacity: 1.0;
		}

		50% {
			opacity: 0.4;
		}

		to {
			opacity: 1.0;
		}
	}

	.shan-text {
		font-size: 16px;
		font-weight: bold;
		animation: fade 600ms infinite;
	}
	
	.xuanzhong-Btn{
		position: fixed;
		z-index: 10;
		left: 5%;
		width: 90%;
		height: 50px;
		box-sizing: border-box;
		border-radius: 25px;
		box-shadow: 0px 0px 5px #999;
		background-color: #0081f8;
		color:#fff;
		text-align: center;
		line-height: 50px;
	}
	.rotated {
	  transition: transform 1s;
	  transform: rotate(360deg);
	}
</style>